<template>
  <view class="container" v-if="moduleRes || matterRes">
    <view class="module" v-if="moduleRes">
      <view class="title">应用</view>
      <view class="items">
        <view class="item" v-for="item in moduleRes" :key="item.moduleID" @click="jumpToModule(item)">
          <view style="font-size: 30rpx" class="t-icon" :class="'t-' + item.icon"></view>
          {{ item.moduleName }}
        </view>
      </view>
    </view>
    <view class="matter" v-if="matterRes">
      <view class="title">办事</view>
      <view class="items">
        <view class="item" v-for="item in matterRes" :key="item.matterID" @click="jumpToMatter(item)">
          <view style="font-size: 30rpx" class="t-icon" :class="'t-' + item.icon"></view>
          {{ item.matterName }}
        </view>
      </view>
    </view>
  </view>
  <view class="no-data" v-else>暂无内容</view>
  <Loading />
</template>

<script setup>
  import {
    onNavigationBarSearchInputConfirmed,
    onNavigationBarSearchInputChanged,
    onNavigationBarButtonTap
  } from '@dcloudio/uni-app'
  import { SearchMatter } from '@/apis/matter.js'
  import { SearchModule } from '@/apis/module.js'
  import { ref } from 'vue'
  import Loading from '@/components/Loading.vue'

  const searchText = ref()
  const matterRes = ref()
  const moduleRes = ref()

  function jumpToModule(e) {
    if (e.moduleURL.startsWith('http')) {
      uni.navigateTo({
        url: `/pages/webview/webview?url=${e.moduleURL}`
      })
    } else if (e.moduleURL.startsWith('wx')) {
      plus.share.getServices(
        (res) => {
          let sweixin = null
          for (let i = 0; i < res.length; i++) {
            let t = res[i]
            if (t.id == 'weixin') {
              sweixin = t
            }
          }
          if (sweixin) {
            uni.showToast({
              position: 'bottom',
              title: '正在唤起微信小程序'
            })
            sweixin.launchMiniProgram({
              id: e.moduleURL,
              type: 0
            })
          }
        },
        (err) => {
          uni.showToast({
            icon: 'error',
            title: err
          })
        }
      )
    } else {
      uni.navigateTo({
        url: e.moduleURL
      })
    }
  }

  function jumpToMatter(e) {
    uni.navigateTo({
      url: `/pages/onlineService/detail/detail?id=${e.matterID}`
    })
  }

  onNavigationBarSearchInputConfirmed((e) => {
    handleSearch(e.text)
  })

  onNavigationBarSearchInputChanged((e) => {
    searchText.value = e.text
  })

  onNavigationBarButtonTap(() => {
    handleSearch(searchText.value)
  })

  function handleSearch(keyword) {
    if (!keyword || keyword === '') return
    SearchMatter({
      keyword
    }).then((res) => {
      matterRes.value = res.data
    })
    SearchModule({
      keyword
    }).then((res) => {
      moduleRes.value = res.data
    })
  }
</script>

<style scoped lang="scss">
  .container {
    padding: 0 20rpx;

    .module {
      margin-bottom: 20rpx;
    }
  }

  .title {
    font-family: SmileySans;
    font-size: 36rpx;
    padding: 20rpx;
  }

  .items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: space-between;
    align-items: center;
    gap: 20rpx;

    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      font-size: 24rpx;
      padding: 10rpx;
      gap: 10rpx;

      &:active {
        filter: contrast(0.8);
        background-color: #ececec;
      }
    }
  }
  .no-data {
    text-align: center;
    color: #333;
    font-size: 24rpx;
    padding: 20rpx;
  }
</style>
